<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕尺寸</title>
    <style>
        body {
            margin: 0;
            font-size: 16px;
        }

        .icon {
            width: 94px;
            height: 94px;
            line-height: 94px;
            border: 1px solid #efefef;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <div id="info"></div>
    <ul>
        <li>13.3-2K-line-31</li>
        <li>13.3-2K-icon-7</li>
        <li>14-1K-line-</li>
        <li>14-1K-icon-8</li>
        <li>14-2.8K-line-</li>
        <li>14-2.8K-icon-8</li>
        <li>15.6-3.2K-line-</li>
        <li>15.6-3.2K-icon-9</li>
        <li>24-1K-line-46</li>
        <li>24-1K-icon-10</li>
        <li>24-2K-line-46</li>
        <li>24-2K-icon-10</li>
        <li>27-1K-line-46</li>
        <li>27-1K-icon-10</li>
        <li>27-2K-line-</li>
        <li>27-2K-icon-14</li>
        <li>27-4K-line-</li>
        <li>27-4K-icon-</li>
    </ul>
    <script>
        //获取屏幕缩放比例
        function getRatio() {
            var ratio = 0;
            var screen = window.screen;
            var ua = navigator.userAgent.toLowerCase();
            if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio;
            }
            else if (~ua.indexOf('msie')) {
                if (screen.deviceXDPI && screen.logicalXDPI) {
                    ratio = screen.deviceXDPI / screen.logicalXDPI;
                }
            }
            else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                ratio = window.outerWidth / window.innerWidth;
            }
            if (ratio) {
                ratio = Math.round(ratio * 100);
            }
            return ratio;
        }
        document.getElementById('info').innerHTML = `屏幕分辨率:${window.screen.width}*${window.screen.height}，缩放比例：${getRatio()}<br />
        屏幕工作区：${window.screen.availWidth}*${window.screen.availHeight}<br />
        网页工作区：${window.innerWidth}*${window.innerHeight}<br />
        行数：${Math.floor(window.innerHeight/21)}，图标数量：${Math.floor(window.innerHeight/94)}`;
        let i = 0, elApp = document.getElementById('app');
        elApp.addEventListener('click', function (evt) {
            console.log(i);
            i++;
            if (i % 2 == 0) {
                showLines();
            } else {
                showIcons();
            }
        })
        function showLines() {
            let arr = [];
            for (let i = 1; i <= 100; i++) {
                arr.push(i);
            }
            elApp.innerHTML = arr.join('<br />');
        }
        function showIcons() {
            let arr = [];
            for (let i = 1; i <= 20; i++) {
                arr.push(`<div class="icon">${i}</div>`);
            }
            elApp.innerHTML = arr.join('');
        }
        showLines();
    </script>
</body>

</html>